/**
 * Created by Administrator on 2017/10/26 0026.
 */
import React from "react";
import { Button, Checkbox, Form, Input, message, Select, Tag } from "antd";
import { get } from "@/axios/tools";

const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const CheckableTag = Tag.CheckableTag;
const FOODS_ROW = 5;

class AddFood extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            searchFood: [],
            selectFoodID: 0,
            menuData: []
        }
    }

    handleChange = (value) => {
        let { searchFood } = this.state;
        let selectFoodID = 0;
        for (let i = 0; i < searchFood.length; i++) {
            if (searchFood[i].name === value) {
                selectFoodID = searchFood[i].id;
            }
        }
        this.setState({ selectFoodID });
    }

    handleSelect = (value, selectedOptions) => {
        if (value.length > 1) {
            let selectFoodID = value[value.length - 1];
            this.setState({ selectFoodID });
        }
    }

    handleSubmit = () => {
        let { selectFoodID } = this.state;
        let { form, submit } = this.props;
        form.validateFields((errors, values) => {
            if (!errors) {
                const foodArray = form.getFieldValue("name");
                if (foodArray && foodArray.length) {
                    // console.log(foodArray)
                    let sendData = foodArray.map((food) => {
                        let data = {
                            num: Number(food.num) || 1,
                            foodName: food.name,
                            foodReducedPrice: food.reducedPrice,
                            cache: true
                        }
                        let idkey = food.type === 'setmeal' ? 'mealID' : 'foodID';
                        data[idkey] = food.id;
                        if (food.items) data.items = food.items;
                        console.log(food)
                        return data;
                    })
                    console.log('senddata     ', sendData);
                    submit(sendData);
                } else {
                    submit();
                    message.info("未添加菜品");
                }
            }
        })
    };

    getSelectOption = () => {
        let { searchFood } = this.state;
        let children = [];
        for (let i = 0; i < searchFood.length; i++) {
            children.push(<Option key={searchFood[i].id} value={searchFood[i].name}>{searchFood[i].name}</Option>)
        }
        return children;
    }

    handleChangeNum = (target, food) => {
        let { value } = target;
        if (!/^\d+$/.test(value)) {
            target.value = 1;
            return
        }
        food.num = value;
        this.props.form.setFieldsValue({ 'num': value });
        // console.log(value, food)
    }

    componentDidMount () {
    }


    render () {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, setFieldsValue } = this.props.form;
        const { foodLayout } = this.props;
        const inputStyle = { width: '100%' };
        return (
            <div className="">
                <div className="table-info">
                </div>
                <Form>
                    <FormItem>
                        {getFieldDecorator('name', {
                            rules: [],
                        })(<CheckboxGroup>
                            <Setmeal handleChangeNum={this.handleChangeNum}/>
                            {foodLayout.map((foodItem, index) => (
                                <div key={index}
                                     className={'food-wrapper' + (index === 0 ? ' first' : '')}
                                >
                                    <h2>{foodItem.menuName}</h2>
                                    <FoodItem foodItem={foodItem} handleChangeNum={this.handleChangeNum}/>
                                </div>)
                            )}
                        </CheckboxGroup>)
                        }
                    </FormItem>
                    <FormItem style={{ display: 'none' }}>
                        {getFieldDecorator('num')(
                            <Input type="hidden"/>
                        )}
                    </FormItem>
                    <FormItem
                        wrapperCol={{ span: 2, offset: 22 }}
                    >
                        <Button type="primary" onClick={this.handleSubmit}>提交</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

/** 套餐列表 **/
class Setmeal extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            setmeal: [],
            selectedTags: [],
        }
    }

    componentDidMount () {
        this.getSetmeal()
    }

    getSetmeal = () => {
        get('setmeal/ListSetMeal', { page: 1, pageSize: 100 })
            .then(res => {
                if (res.data) {
                    let setmeal = res.data.map(item => {
                        item.type = 'setmeal'
                        return item
                    })
                    this.setState({
                        setmeal
                    })
                    console.log(setmeal)
                }
            })
    }

    render () {
        const { selectedTags } = this.state;
        return <div className="setmeal-box food-wrapper">
            <h2>{'套餐'}</h2>
            <FoodItem foodItem={{ menuId: -1, foods: this.state.setmeal }} handleChangeNum={this.props.handleChangeNum}/>

        </div>
    }
}

const FoodItem = props => {
    const { foodItem } = props;
    return (<div
        key={foodItem.menuId}
        className="food-group"
        style={foodItem.foods.length === 0 ? { display: 'none' } : null}>
        {
            foodItem.foods.map(food => <Food key={food.id} {...props} food={food}/>)
        }
    </div>)
}

const Food = props => {
    const { food, handleChangeNum } = props;
    return (<div key={food.id} className="food-item">
        <Checkbox value={food}>{food.name}</Checkbox>
        <Input
            className="food-num"
            size="small"
            min={1}
            defaultValue={1}
            style={{
                width: '50px',
                position: 'absolute',
                top: '50%',
                right: 0,
                textAlign: 'center',
                transform: 'translate(0, -50%)',
                border: 0
            }}
            onChange={(e) => handleChangeNum(e.target, food)}
        />
    </div>)
}

export default Form.create()(AddFood);